import React from "react";
// 引入 PropTypes 做 props 的类型检查
import PropTypes from "prop-types";
// 引入 样式, 研究，这里是全局生效样式还是局部样式
import "./index.css";

class Modal extends React.Component {
  /**
   * prop 的类型校验
   */
  static ptopTypes = {
    title: PropTypes.string,
  };

  /**
   * prop 的默认值
   */
  static defaultProps = {
    title: "温馨提示",
  };

  state = {
    name: "Modal",
  };

  handleClose = () => {
    console.log("handleClose");
    // prop 数据不允许修改
    // this.props.visible = false;
    // 要通知父组件去改
    //    1. 父组件传一个函数下来
    //    2. 子组件需要的时候去调用即可
    this.props.onClose();
  };

  render() {
    const { title, children, footer, visible } = this.props;

    return (
      visible && (
        <div className="modal">
          <div className="modal-mask"></div>

          <div className="modal-box">
            <div className="modal__header">
              <div className="modal-title">{title}</div>
              <div className="modal-close" onClick={this.handleClose}>
                关闭
              </div>
            </div>

            {/* 收到的 children 是一个元素 */}
            {/* <div className="modal__body">{children}</div> */}

            {/* 收到的 children 是一个函数 */}
            <div className="modal__body">{children(this.state.name)}</div>

            <div className="modal__footer">
              {footer ? (
                footer
              ) : (
                <div className="modal-buttons">
                  <button className="modal-button--default">取消</button>
                  <button className="modal-button--primary">确定</button>
                </div>
              )}
            </div>
          </div>
        </div>
      )
    );
  }
}

export default Modal;
